<template>
	<view class="content">
		<view>
			<swiper :autoplay="true" :duration="500" :indicator-dots="false" :interval="3000" class="swiper">
				<swiper-item v-for="(item, index) in list" :key="index">
					<image :src="item.image" class="swiperImage">
					</image>
				</swiper-item>
			</swiper>

		</view>

		<view class="container">

			<view class="h1">
				<view>
					<image class="h11" src="/static/images//home/horn.png"></image>
				</view>

				<view class="h12">{{ currentSentence }}
				</view>
			</view>


			<view class="h2">
				<button class="h21" @click="getNews">详情</button>
			</view>
		</view>

		<view v-if="form.length" class="usage">
			<view v-for="(item, index) in form" :key="index" class="usage-group">
				<view class="usage1">
					<!-- 使用模运算确保图片索引不会超出范围 -->
					<image :src="usageImages[index % 3]" class="usage11" />
				</view>
				<view class="usage2">
					<view>领用人：{{ item.usagePeople }}</view>
					<view>所在部门：{{ item.usageDepartment }}</view>
					<view>用品名称：{{ item.usageName }}</view>
					<view>领用时间：{{ item.usageDate }}</view>
				</view>
			</view>
		</view>

	</view>


</template>

<script>
import {getUsagePeople} from "@/api/usage/usage";
import {listNews} from "@/api/system/news";

export default {
		data() {
			return {
				reads: "",
				items: [],
				name: "赵宇",
				list: [{
						image: '../static/images/home/01.jpg'
					},
					{
						image: '../static/images/home/02.jpg'
					},
					{
						image: '../static/images/home/03.jpg'
					}
				],

				sentences: [
					'办公用品已上新1',
					'办公用品已上新2',
					'办公用品已上新3'
				],

				currentIndex: 0,
				intervalId: null,

				form: [],

				queryParams: {
					usageName: null,
					usagePeople: null,
					usageDate: null,
					usageDepartment: null,
					usageState: null
				},

				usageImages: [
					'../static/images/wenju/1.png',
					'../static/images/wenju/2.png',
					'../static/images/wenju/3.png',
				],

			}

		},

		onLoad() {
			this.footMsgFun() //调用底部方法
		},
		onShow() {
			this.footMsgFun() //调用底部方法
		},

		computed: {
			currentSentence() {
				return this.sentences[this.currentIndex];
			}
		},
		mounted() {
			this.startRotation();
		},
		beforeDestroy() {
			if (this.intervalId) {
				clearInterval(this.intervalId);
			}
		},


		methods: {
			getNews() {
				if (this.currentIndex == 0)
					this.$tab.navigateTo('/pages/notify/notifya')
				else if (this.currentIndex == 1) {
					this.$tab.navigateTo('/pages/notify/notifyb')
				} else {
					this.$tab.navigateTo('/pages/notify/notifyc')
				}
			},
			getUsage() {
				const usagePeople = this.$store.getters.name;
				getUsagePeople(usagePeople).then(response => {
					this.form = response.data;
					console.log("response.data")
				});
			},
			getList() {
				listNews(this.queryParams).then(response => {
					this.items = response.rows;
					this.reads = this.items.reduce((accumulator, item) => {
						if (item.newsRead === 0) {
							return accumulator + 1; // 如果newsRead等于0，累加器加1
						}
						return accumulator; // 否则返回当前累加器的值
					}, 0); // 初始累加器的值设为0

					console.log('未读新闻数量:', this.reads);
					this.footMsgFun();
				});
			},
			footMsgFun() {
				if (this.reads > 0) {
					uni.setTabBarBadge({
						index: 3,
						text: this.reads.toString(),
					});
				} else {
					uni.removeTabBarBadge({
						index: 3,
					});
				}
			}
		},
		created() {
			this.getList();
			this.getUsage();
			this.getUsagePeople();
		},
		watch: {
			reads: {
				handler(newreads, oldreads) {
					if (newreads !== this.reads) {
						uni.setreads(newreads);
					}
					console.log(newreads)
				},
				immediate: true
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f6f7;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.swiper {
		width: 400px;
		height: 200px;
	}

	.swiperImage {
		width: 100%;
		border-radius: 10px;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.h21 {
		line-height: 100rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.h1 {
		display: flex;
		width: 300rpx;
		height: 50rpx;

	}


	.h11 {

		width: 50rpx;
		height: 50rpx;

	}


	.h12 {

		/* width: 200rpx;
  height: 50rpx; */
		/* justify-content: center;
  align-items: center; */
		margin: auto 0;

	}

	.h2 {
		width: 120rpx;
		height: 50rpx;

	}

	.h21 {

		/* width: 120rpx;
  height: 50rpx; */
		line-height: 50rpx;
		font-size: 14px;
		justify-content: center;
		align-items: center;
		text-align: center;


	}

	.container {

		justify-content: space-between;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		width: 600rpx;
		height: 55rpx;
	}

	.usage {
		display: flex;
		flex-direction: column;
		/* 垂直堆叠 */
		align-items: center;
		/* 水平居中 */
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: auto;
		margin-right: auto;
		width: 600rpx;
	}

	.usage-group {
		display: flex;
		/* 使图片和文本在同一行显示 */
		align-items: center;
		/* 垂直居中 */
		justify-content: space-between;
		/* 图片和文本之间留有空间 */
		width: 100%;
		margin-bottom: 20rpx;
		/* 在每组之间添加一些间距 */
	}

	.usage1 {
		width: 40%;
		height: auto;
		margin-bottom: 10rpx;
		/* 添加底部边距以分隔图片和文本 */
	}

	.usage2 {
		width: 50%;
		padding-left: 20rpx;
		/* 使文本不紧贴容器边缘 */
	}

	.usage11 {
		height: 180rpx;
	}
</style>